<template>
    <view>
        <slot>
            <view v-if="navs && navs.length > 1" :style="{height:`calc(${botNavHei}rpx + env(safe-area-inset-bottom))`, width: '100%'}"></view>
        </slot>
        <view v-if="navs && navs.length > 1" :class="{'app-tab-bar-shadow': shadow}"
              :style="{backgroundColor: bottom_background_color}" class="app-navigation-bar safe-area-inset-bottom">
            <view v-for="(item, index) in navs" :key="index"
                  :style="{height: botNavHei + 'rpx',backgroundColor: bottom_background_color, width: `${100/navs.length}%`}"
                  class="navbar-item box-grow-1">
                <!-- #ifdef MP-BAIDU -->
                <app-jump-button :backgroundColor="bottom_background_color"
                                 :open_type="index == 0 ? 'reLaunch' : router === navs[0].url ? 'navigate' : item.open_type"
                                 :params="item.params"
                                 :url="item.url"
                                 arrangement="column"
                                 class="app-button"
                                 form
                >
                    <image :src="router === item.url ? item.active_icon : item.icon" class="app-icon"></image>
                    <text class="app-nav-text"
                          v-bind:style="{'color': router === item.url ? item.active_color : item.color}">
                        {{ item.text }}
                    </text>
                </app-jump-button>
                <!-- #endif -->
                <!-- #ifndef MP-BAIDU -->
                <app-jump-button :backgroundColor="bottom_background_color"
                                 :open_type="item.open_type"
                                 :params="item.params"
                                 :url="item.url"
                                 arrangement="column"
                                 class="app-button"
                                 form
                >
                    <image class="app-icon" :src="router === item.url ? item.active_icon : item.icon"></image>
                    <text class="app-nav-text"
                          v-bind:style="{'color': router === item.url ? item.active_color : item.color}">
                        {{ item.text }}
                    </text>
                </app-jump-button>
                <!-- #endif -->
            </view>
        </view>
    </view>
</template>

<script>
import {mapGetters} from 'vuex';

export default {
    name: 'mch-navbar',
    data() {
        return {
            router: '',
            navs: [],
            bottom_background_color: '',
            shadow: false,
        }
    },
    props: {
        mchId:[String,Number],
        pageCount: Number,
    },

    computed: {
        ...mapGetters('iPhoneX', {
            botNavHei: 'getNavHei',
        }),
    },
    methods: {
        flashData(info) {
            if(info){
                let {bottom_background_color, shadow, navs} = JSON.parse(JSON.stringify(info));
                this.bottom_background_color = bottom_background_color;
                this.shadow = shadow;
                this.navs = navs.map(item => {
                    item.url = item.url + '?mch_id=' + this.mchId;
                    return item;
                });
            }
        }
    },
    created() {
        /////打烊
        this.$request({
            url: this.$api.index.status,
            data: {
                mch_id_list: JSON.stringify([this.mchId]),
            }
        }).then(info => {
            if (info.code === 0) {
            } else {
                wx.showModal({
                    title: '提示',
                    showCancel: false,
                    content: info.msg,
                    success (res) {
                        uni.navigateBack({
                            delta: 1
                        })
                    }
                })
            }
        })
        /////
        function re() {
            self.$request({
                url: self.$api.mch.diy_nav,
                data: {
                    mch_id: self.mchId,
                }
            }).then(info => {
                if (info.code === 0) {
                    self.flashData(info.data.navbar);
                    self.$storage.setStorage({
                        key: 'MCH_NARBAR_' + self.mchId,
                        data: info.data.navbar
                    });
                }
            })
            // #ifdef MP
            let router = self.$platDiff.tabBarUrl(null, self.pageCount);
            self.router = /mch_id/.test(router) ? router : router + '?mch_id=' + self.mchId;
            // #endif
        }
        const self = this;
        self.$storage.getStorage({
            key: 'MCH_NARBAR_' + self.mchId,
            success(res) {
                self.flashData(res.data);
                re();
            },
            fail(res){
                re();
            }
        });
    },
    watch: {
        navs: {
            handler: function(data){
                this.$emit('setHeight', this.navs && this.navs.length > 1 ? `(${this.botNavHei}rpx + env(safe-area-inset-bottom))`: 0);
            },
            deep:true,
        },
        // #ifdef H5
        '$route': {
            handler: function (data) {
                let {query, meta} = data;
                let str = '?';
                for (let key in query) {
                    str += `${key}=${query[key]}&`
                }
                let url = '/' + meta.pagePath + str;
                url = url.slice(0, url.length - 1);
                this.router = url;
            },
            deep: true,
            immediate: true
        }
        // #endif
    }
};
</script>

<style lang="scss" scoped>
.app-navigation-bar {
    display: flex;
    flex-direction: row;
    width: 100%;
    bottom: 0;
    left: 0;
    background-color: white;
    z-index: 1000;
    position: fixed;
    box-shadow: 0 2#{rpx} 0 0 #E5E5E5;
}

.navbar-item {
    position: relative;
}

.app-icon {
    width: #{44rpx};
    height: #{44rpx};
    position: absolute;
    top: 0;
    left: 50%;
    margin-top: #{16rpx};
    transform: translateX(-50%);
}

.app-nav-text {
    font-size: #{22rpx};
    line-height: #{22rpx};
    margin-top: #{60rpx};
}
.app-tab-bar-shadow {
    border-top: 1rpx solid $uni-weak-color-one;
}
</style>
